<template>
  <div class="main-page">
    <!-- 表单 -->
    <el-card :body-style="{ padding: '0px' }" class="box-card">
      <div class="SearchT">
        <div class="tableLable">
          <el-button style="font-size:12px" @click="getFrequencySetList()">刷新</el-button>
        </div>
      </div>
      <div class="tableStyle">
        <el-table
          ref="multipleTable"
          class="card-table"
          :data="this.FrequencyList"
          tooltip-effect="dark"
          style="font-size:12px"
          :header-cell-style="{ background: '#3F9DFD', color: '#FFF' }"
          size="medium"
          stripe
          border
        >
          <el-table-column label="序号" type="index" width="50"></el-table-column>
          <el-table-column label="医院名称" prop="hs_NAME" width="120"></el-table-column>
          <el-table-column prop="gypc" label="医院频次编码" show-overflow-tooltip width="220" />
          <el-table-column prop="pcsm" label="医院频次名称" show-overflow-tooltip width="220" />
          <el-table-column label="审查用频次次数(可编辑)" show-overflow-tooltip width="180">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.times"
                size="small"
                @change="changestimes(scope.row.id,$event)"
                placeholder="请输入内容"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="days" label="审查用频次天数(可编辑)" show-overflow-tooltip width="180">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.days"
                size="small"
                @change="changesdays(scope.row.id,$event)"
                placeholder="请输入内容"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="编辑状态" show-overflow-tooltip width="100">
            <template slot-scope="scope">{{(scope.row.matchState==1)?"已编辑":""}}</template>
          </el-table-column>
          <el-table-column prop="matchUser" label="编辑人员/时间" show-overflow-tooltip>
            <template slot-scope="scope">{{scope.row.matchUser}}/{{getDate(scope.row.matchTime)}}</template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.page"
            :page-sizes="[20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
          ></el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import BaseSearchBar from "./BaseSearchBar";
import {
  getFrequencySetList,
  getdate,
  changestimes,
  changesdays
} from "@/api/rad";
export default {
  name: "MainPage",
  components: {
    BaseSearchBar
  },
  methods: {
    // 监听pagesize改变的事件
    handleSizeChange(newSize) {
      console.log(newSize);
    },
    // 当前展示的页面
    handleCurrentChange(newPage) {
      console.log(newPage);
    }
  },
  data() {
    return {
      // 列表的参数对象
      queryInfo: {
        query: "",
        // 当前的页数
        page: 1,
        pageSize: 20
      },
      total: 0,
      FrequencyList: []
    };
  },

  created: function() {
    this.getFrequencySetList();
  },
  methods: {
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getFrequencySetList();
    },
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage;
      this.getFrequencySetList();
    },
    async getFrequencySetList() {
      let res = await this.$rad.getFrequencySetList({
        page: this.queryInfo.page,
        pageSize: this.queryInfo.pageSize
      });
      this.FrequencyList = res.rows;
      this.total = res.total;
      console.log(res);
    },
    // 时间戳转时间
    getDate(date) {
      return this.$rad.getdate(date);
    },
    async changestimes(TypeId, e) {
      console.log(TypeId);
      console.log(e);
      var res = await this.$rad.changestimes({
        id: TypeId,
        times: e
      });
      console.log(res);
      if (res.code == 1) {
        this.getFrequencySetList();
        return this.$message({
          type: "success",
          message: res.msg
        });
      } else {
        this.getFrequencySetList();
        return this.$message({
          type: "error",
          message: res.msg
        });
      }
    },
    async changesdays(TypeId, e) {
      console.log(TypeId);
      console.log(e);
      var res = await this.$rad.changesdays({
        id: TypeId,
        days: e
      });
      console.log(res);
      if (res.code == 1) {
        this.getFrequencySetList();
        return this.$message({
          type: "success",
          message: res.msg
        });
      } else {
        this.getFrequencySetList();
        return this.$message({
          type: "error",
          message: res.msg
        });
      }
    }
  }
};
</script>
<style scoped>
.el-card {
  margin-left: 3px;
}
.SearchT {
  display: flex;
  justify-content: flex-end;
  height: 50px;
  align-items: center;
  background-color: #e6edf3;
  font-size: 14px;
}
.tableLable {
  flex: 1;
  text-align: left;
  margin-left: 1px;
  letter-spacing: 2px;
  font-size: 14px;
  color: #32a6f3;
  font-weight: bold;
}
.exportBtn {
  margin-right: 23px;
}
.BatchDeleBtn {
  margin-right: 15px;
}
.tableStyle {
  width: 100%;
  height: 100%;
}
.card-table {
  width: 100%;
  height: 75%;
}
.block {
  text-align: center;
  margin-top: 12px;
  margin-bottom: 12px;
}
</style>
